<template>
	<view class="personal-info-box">
		<view style="padding: 40rpx">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form labelPosition="left" :model="model" :rules="rules" ref="uForm" labelWidth="200rpx">
				<u-form-item label="微信头像" prop="weAvatar" borderBottom>
					<u-image :showLoading="true" :src="model.weAvatar" width="80px" height="80px"
						radius="10rpx"></u-image>
				</u-form-item>
				<u-form-item label="背景图" prop="backgroundImage" borderBottom>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="1"
						:previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item label="微信用户名" prop="weUserName" borderBottom>
					<u--input v-model="model.weUserName"></u--input>
				</u-form-item>
				<!-- 	<u-form-item label="微信手机号" prop="wePhone" borderBottom>
					<u--input readonly v-model="model.wePhone"></u--input>
				</u-form-item> -->
				<u-form-item label="性别" prop="sex" borderBottom>
					<u-radio-group v-model="model.sex">
						<u-radio :customStyle="{ marginBottom: '8px', marginRight: '8px' }"
							v-for="(item, index) in sexlist" :key="index" :label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="身份证号" prop="identityCard" borderBottom>
					<u--input clearable v-model="model.identityCard"></u--input>
				</u-form-item>
				<u-form-item label="生日" prop="birthday" borderBottom>
					<u--input clearable v-model="model.birthday"></u--input>
				</u-form-item>
				<u-form-item label="邮箱" prop="email" borderBottom>
					<u--input clearable v-model="model.email"></u--input>
				</u-form-item>
				<u-form-item label="年龄" prop="age" borderBottom>
					<u--input type="number" clearable v-model="model.age"></u--input>
				</u-form-item>
				<u-form-item label="学历" prop="education" @click="educationClick" borderBottom>
					<u--input v-model="model.education" readonly></u--input>
				</u-form-item>
				<u-form-item label="专业" prop="profession" borderBottom>
					<u--input v-model="model.profession"></u--input>
				</u-form-item>
				<u-form-item label="归属地" prop="locationName" borderBottom>
					<u--input v-model="model.locationName"></u--input>
				</u-form-item>
			</u--form>
			<u-picker @confirm="educationConfirm" @cancel="educationCancel" :show="isProfession"
				:columns="professionColumns"></u-picker>
			<view style="padding: 40rpx">
				<u-button @click="submitClick" type="primary" color="#216be6" text="确定"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import baseUrl from "@/api/axios/baseUrl.js";
	import {
		edit,
		info
	} from "@/api/axios/center.js";
	export default {
		data() {
			return {
				isProfession: false,
				professionColumns: [
					["大专以下", "大专", "本科", "研究生", "硕士", "博士"],
				],
				sexlist: [{
						name: "男",
						value: 0,
						disabled: false,
					},
					{
						name: "女",
						value: 1,
						disabled: false,
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				showSex: false,
				model: {
					weAvatar: "https://cdn.uviewui.com/uview/album/1.jpg",
					backgroundImage: "",
					weUserName: "",
					wePhone: "",
					age: "",
					education: "",
					profession: "",
					locationName: "",
					sex: "",
					identityCard: "",
					birthday: "",
					email: "",
				},
				fileList: [],
				rules: {
					// 'name': {
					// 	type: 'string',
					// 	required: true,
					// 	message: '请填写姓名',
					// 	trigger: ['blur', 'change']
					// }
				},
				radio: "",
				switchVal: false,
			};
		},
		methods: {
			educationClick() {
				this.isProfession = true;
			},
			educationConfirm(e) {
				console.log(e);
				this.model.education = e.value;
				this.isProfession = false;
			},
			educationCancel(e) {
				console.log(e);
				this.isProfession = true;
			},
			submitClick() {
				if (this.fileList.length > 0) {
					this.model.backgroundImage = this.fileList[0].url;
				}
				// 因为选择之后this.model.education 为数组，回显的时候不是数组所以需要判断一下
				if (this.model.education instanceof Array) {
					this.model.education = this.model.education ?
						this.model.education[0] :
						"";
				} else {}

				edit(this.model).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							icon: "none",
							title: "提交成功",
							duration: 2000,
						});
						uni.setStorageSync("nickName", this.model.weUserName);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1,
							});
						}, 2000);
					} else {
						uni.showToast({
							icon: "none",
							title: "提交失败",
							duration: 2000,
						});
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1);
			},
			// 新增图片
			async afterRead(event) {
				console.log(event);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				console.log(this[`fileList${event.name}`]);
				let fileListLen = this[`fileList${event.name}`].length;
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: "uploading",
						message: "上传中",
					});
				});
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					let item = this[`fileList${event.name}`][fileListLen];
					this[`fileList${event.name}`].splice(
						fileListLen,
						1,
						Object.assign(item, {
							status: "success",
							message: "",
							url: result,
						})
					);
					fileListLen++;
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: baseUrl.url + "/xihefile/user/file/upload",
						filePath: url,
						name: "file",
						formData: {},
						success: (uploadFileRes) => {
							console.log(uploadFileRes);
							let url = JSON.parse(uploadFileRes.data).data;
							console.log(url, "url");
							resolve(url);
						},
					});
				});
			},
		},
		onLoad() {
			let _this = this;
			_this.model.openId = uni.getStorageSync("openId");
			info({
				params: {
					openId: this.model.openId,
				},
			}).then((res) => {
				console.log(res);
				_this.model = res;
				if (res.backgroundImage) {
					_this.fileList = [{
						url: res.backgroundImage,
					}, ];
				}

				_this.model.weAvatar = uni.getStorageSync("avatarUrl");
				_this.model.weUserName = uni.getStorageSync("nickName");
				_this.model.wePhone = uni.getStorageSync("wePhone");
			});
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。

			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>
<style scoped lang="scss">
	@import "./index.scss";
</style>